<template>
    <el-breadcrumb class="vea-breadcrumb">
        <el-breadcrumb-item :to="{name:'home'}">首页</el-breadcrumb-item>
        <el-breadcrumb-item>友情链接</el-breadcrumb-item>
    </el-breadcrumb>
    <vea-button-components/>
    <el-table class="vea-table" border stripe height="70vh" v-loading="load" :data="friend" size="small">
        <el-table-column type="index" width="50" align="center"/>
        <el-table-column label="logo" width="80">
            <template #default="scoped">
                <el-image :src="scoped.row.logo" v-if="scoped.row.logo"/>
            </template>
        </el-table-column>
        <el-table-column label="名称" prop="name"/>
        <el-table-column label="打开方式" prop="open_type"/>
        <el-table-column label="状态" width="80" align="center">
            <template #default="scoped">
                <el-tag :type="menuState[scoped.row.state].type">
                    {{ menuState[scoped.row.state].text }}
                </el-tag>
            </template>
        </el-table-column>
        <el-table-column label="操作">
            <template #default="scoped">
                <vea-button-components type="option" :row="scoped" :delete-text="`是否删除链接${scoped.row.name}`"/>
            </template>
        </el-table-column>
    </el-table>
    <vea-page-components @get-data="getData" :page="page" :total="total"/>
</template>

<script setup>
import VeaButtonComponents from "@/components/veaMenuComponents/VeaButtonComponents.vue";
import VeaPageComponents from "@/components/veaMenuComponents/VeaPageComponents.vue";
import {onMounted, ref} from "vue";
import {$ajax, apiUrl} from "@/utils/request";
import {menuState} from "@/utils/constant";

const load = ref(false)
const friend = ref([])
const page = ref(1)
const total = ref(0)
const getData = (pages = 1) => {
    page.value = pages
    load.value = true
    $ajax.get(`${apiUrl}/friend_link/lst`, {params: {page: pages}}).then(({data: {result}}) => {
        total.value = result.total
        load.value = false
        friend.value = result.data
    }).catch(() => load.value = false)
}

onMounted(() => {
    getData(1)
})
</script>

<style scoped>

</style>
